<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>CNCF - Cloud Native Computing Foundation</title>
    <!-- Font Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="/css/mdb.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/toastr.css" rel="stylesheet">
</head>

<body class="creative-lp  bg-white">

<header>

    <!-- 顶部导航 -->
    <nav th:replace="~{common :: nav}"></nav>

</header>

<!-- Intro Section -->
<div class="view jarallax" data-jarallax='{"speed": 0.2}'
     style="background-image: url(https://upload-images.jianshu.io/upload_images/3424642-a932f632c6a82d14.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);">
    <div class="full-bg-img">
        <div class="mask rgba-black-light">
            <div class="container flex-center">
                <div class="row pt-5 mt-3">
                    <div class="col-md-12 wow fadeIn mb-3">
                        <div class="text-center white-text">
                            <ul class="list-unstyled ">
                                <li>
                                    <h4 class="display-4 mt-md-5 mt-md-0 mb-5 wow fadeIn"
                                        data-wow-delay="0.3s">
                                        <img src="https://upload-images.jianshu.io/upload_images/3424642-26fc7fb925e76f94.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="" style="margin: 0 auto">
                                    </h4>
                                </li>
                                <li>
                                    <h5 class="white-text description mb-5 wow fadeIn" data-wow-delay="0.4s">
                                        云原生计算基金会构建可持续生态系统，并围绕一系列高质量项目促进社区的发展，<br>
                                        这些项目将容器作为微服务架构的一部分进行编排。
                                    </h5>
                                </li>
                                <li class="wow fadeIn" data-wow-delay="0.4s">
                                    <a class="btn pink-gradient btn-rounded btn-lg font-weight-bold" href="https://www.cncf.io/" target="_blank">CNCF 官网</a>
                                    <a class="btn pink-gradient btn-rounded btn-lg font-weight-bold" href="/#contract">CNCF 交流</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/Intro-->

<!-- /.Main Container -->
<div class="container">
    <div class="row pt-4">

        <!-- Content -->
        <section class="py-4 text-center text-lg-left">

            <!--Section heading-->
            <h1 class="h1 font-weight-bold text-center mb-5 pt-4">CNCF 是什么？</h1>
            <!--Section description-->
            <p class="text-center mb-5 pb-3">
                CNCF 是一个开源软件基金会，致力于使云原生计算具有普遍性和可持续性。 云原生计算使用开源软件技术栈将应用程序部署为微服务，将每个部分打包到自己的容器中，并动态编排这些容器以优化资源利用率。 云原生技术使软件开发人员能够更快地构建出色的产品。</p>

            <div th:each="project,iterStat : ${projects}">

                <hr class="mb-5 mt-5 pb-3">

                <div class="row" >
                    <div class="col-lg-5 col-xl-5 pb-3" th:if="${iterStat.index} % 2 == 0">
                        <div class="view overlay rounded z-depth-2">
                            <img th:src="${project.homeImage}" class="img-fluid">
                            <a th:href="${project.home}">
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>

                    <div class="col-lg-7 col-xl-7">
                        <h3 class="mb-4 font-weight-bold dark-text">
                            <img th:src="${project.logo}" style="width: 80px">
                            <span th:text="${project.name}" class="pl-2"></span>
                        </h3>
                        <p th:text="${project.description}"></p>
                        <div class="row" th:utext="${project.links}">

                        </div>
                    </div>

                    <div class="col-lg-5 col-xl-5 pb-3" th:unless="${iterStat.index} % 2 == 0">
                        <div class="view overlay rounded z-depth-2">
                            <img th:src="${project.homeImage}" class="img-fluid">
                            <a th:href="${project.home}">
                                <div class="mask rgba-white-slight"></div>
                            </a>
                        </div>
                    </div>
                </div>

            </div>

        </section>

        <div class="mt-5"></div>

        <!-- /.Content -->

    </div>
</div>
<!-- /.Main Container -->

<!-- 返回顶部 -->
<section >
    <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-lg purple-gradient" style="display:none;" id="goTop">
            <i class="fa fa-arrow-up" aria-hidden="true"></i>
        </a>
    </div>
</section>

<!-- 网站底部 -->
<footer th:replace="~{common :: footer}"></footer>
<!-- /网站底部 -->

<!-- JQuery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script src="https://cdn.bootcss.com/mdbootstrap/4.5.0/js/mdb.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/toastr.min.js"></script>

<script>
    //Animation init
    new WOW().init();

    // 返回顶部
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop() > 500){
                $("#goTop").fadeIn(200);
            }
            else{
                $("#goTop").hide(200);
            }
        });
        $("#goTop").click(function(){
            $('html,body').animate({'scrollTop': 0 }, 500);
        });
    });

    /**
     * 用户提交留言
     */
    function submitMessage() {
        var username = $("#user-name").val();
        var email = $("#user-email").val();
        var message = $("#user-content").val();
        if(username.trim().length === 0){
            toastr.error("请填写您的姓名 ！");
            return;
        }
        if(email.trim().length === 0){
            toastr.error("请填写您的微信 ！");
            return;
        }
        if(message.trim().length === 0){
            toastr.error("下载地址不能为空 ！");
            return;
        }
        $.post("/api/common/message",{
            nickname:username,
            email:email,
            content:message
        },function(response){
            if (response.code ===  0){
                $('#user-name').val('');
                $('#user-email').val('');
                $('#user-content').val('');
                toastr.success("感谢您的分享，审核通过后会及时上架！");
            }else {
                toastr.error("发送失败，请用其他方式联系我们！");
            }
        });
        return false;
    }
</script>

</body>
</html>